<template>
	<view class="content">
		<view class="main">
			<view class="rightusercon">
				<view class="rightmsg">
					<view class="rightname">
						<text class="timecon">2022-02-02 12:00</text>
					</view>
					<!-- <view class="righttext">
						<view>病情描述：头疼，感冒，不舒服，浑身无力</view>
						<view>患病时长：3天</view>
						<view>医院检查：xxxx</view>
						<view>用药情况：未用药</view>
					</view> -->
					<!-- 描述症状内容 -->
					<view class="miaoshu-zhengzhuang righttext">
						<view class="miaoshu-item"><text class="color666">病情描述：</text>哈哈哈</view>
						<view class="miaoshu-item">
							<text class="color666">患病时长：</text>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
						</view>
						<view class="miaoshu-item"><text class="color666">医院检查：</text>哈哈哈</view>
						<view class="miaoshu-item"><text class="color666">用药情况：</text>哈哈哈</view>
						<view class="miaoshu-img">
							<image @click="handlePreviewImage" class="img" :key="index" v-for="(item, index) in 3"
								src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="rightuserlogo">
					<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/avatar.png"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="leftusercon">
				<view class="leftuserlogo">
					<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/system.png"
						mode="aspectFill"></image>
				</view>
				<view class="leftmsg">
					<view class="leftname">
						<text class="timecon">2022-02-02 12:00</text>
					</view>
					<view class="lefttext">暂无医生回复，请您耐心等待，若超过24小时无医生回复，系统将自动退回您的费用。</view>
				</view>

			</view>
			<view class="fontsize12 color3FA  marginleft100">倒计时：22：12：23</view>
		</view>
		<view class="systembtn">
			<my-button borderRadius="16" height="96" width="670" hoverClass="none" @click="editdisease" border>
				修改病情描述
			</my-button>
		</view>
	</view>
</template>

<script>
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
	components: {
		MyButton
	},
	data() {
		return {

		};
	},
	computed: {
	},
	onLoad() {

	},
	methods: {

		/**
		 * @description 获取聊天记录
		 * @param conversationID
		 * @returns {Promise<void>}
		 */
		async getMessageList(conversationID) {
			let { messageList, nextReqMessageID, isCompleted } = await this.$im.getMessageList(
				conversationID,
				this.nextReqMessageID
			);
			this.nextReqMessageID = nextReqMessageID || "";
			this.isCompleted = !!isCompleted;
			if (messageList && messageList.length > 0) {
				// 过滤掉创建群的消息
				messageList = messageList.filter(
					item =>
						item.payload && item.payload.data !== "group_create" && !item.payload.operationType
				);
				// 给聊天记录列表赋值
				this.messageList.unshift(...messageList);
				this.$store.commit("setMessageList", this.messageList);
				if (this.init) {
					this.scrolltobottom(300);
					this.init = false
				}

			}
		},
		editdisease() {
			uni.switchTab({
				url: '../treatment/treatment'
			})
		}
	},
};
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}

.content {
	height: calc(100vh - 200rpx);
	width: 100vw;
}

.marginleft100 {
	margin-left: 120rpx;
	margin-top: 20rpx;
}

.main {
	width: 100%;
	margin: 0 auto;
	overflow-y: auto;
	padding: 0 20rpx;
	padding-bottom: 160rpx;
	box-sizing: border-box;
}

.leftusercon {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-top: 20rpx;
	width: 100%;
}

.leftuserlogo,
.rightuserlogo {
	width: 100rpx;
}

.leftuserlogo image {
	margin-right: 28rpx;
}

.leftuserlogo image,
.rightuserlogo image {
	width: 88rpx;
	height: 88rpx;
}

.leftname,
.rightname {
	font-size: 20rpx;
	font-weight: 600;
	margin-bottom: 20rpx;
}

.lefttext {
	background-color: #FFF;
}

.righttext {
	background-color: #E0F0FE;
}

.lefttext,
.righttext {
	width: 70vw;
	font-size: 24rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	line-height: 50rpx;
	display: inline-block;
}

.righttext {
	text-align: left !important;
}

.leftmsg {
	text-align: left;
}

.rightmsg {
	text-align: right;
}

.lefttppng video,
.righttppng video {
	width: 340rpx;
	height: 300rpx;
}

.lefttppng image,
.righttppng image {
	width: 240rpx;
	height: 280rpx;
}

.rightusercon {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 20rpx;
	text-align: right;
}

.timecon {
	margin: 0 20rpx;
	font-weight: 400;
}

// 描述症状内容
.miaoshu-zhengzhuang {
	width: 70vw;

	.miaoshu-item {
		font-size: 24rpx;
	}

	.miaoshu-img {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}

.systembtn {
	display: flex;
	flex-direction: row;
	justify-content: center;

}
</style>
